<!--
  *@Description : 添加文章组件
  *@author 萧红
  *@date 2020-05-02 17:41
  *@LastEditTime 2020-05-02 17:41
  *@LastEdititors
-->
<template>
    <div id="addArticle">
      <add-top :title="'发文章'" @commit="add"></add-top>
      <div :style="{height: $inerHeight + 'px'}">
        <cube-scroll :data="[1,2,3,4]" ref="scroll" :style="{height:$inerHeight + 55 - 35+'px'}">
          <!--// 封面图区域-->
          <div class="fengmian-img">
            <cube-upload
              ref="upload"
              v-model="files"
              action="http://112.126.100.206/uploadFile"
              @files-added="addedHandler"
              @file-error="errHandler"
              :max="1">
              <div class="clear-fix">
                <cube-upload-file v-for="(file, i) in files" :file="file" :key="i" class="upload-file"></cube-upload-file>
                <cube-upload-btn :multiple="false">
                  <div class="btn">
                    <span>＋</span>
                    <p>请选择封面图</p>
                  </div>
                </cube-upload-btn>
              </div>
            </cube-upload>
          </div>
          <cube-textarea class="artic-title" placeholder="请输入文章标题，最多20字" :maxlength="20" v-model="title"></cube-textarea>
          <cube-textarea class="artic-daoyu" placeholder="请输入文章导语，最多50字,非必填" :maxlength="50" v-model="introduction"></cube-textarea>
          <cube-textarea class="artic-text" placeholder="请输入正文，最多100字" :maxlength="100" v-model="content"></cube-textarea>
        </cube-scroll>
      </div>
    </div>
</template>

<script>
import AddTop from '../../components/AddTop'
export default {
  name: 'AddArticle',
  components: {AddTop},
  data () {
    return {
      files: [], // 文件列表
      title: '', // 文章标题
      introduction: '', // 引言
      content: '' // 正文
    }
  },
  methods: {
    // 单击发布按钮时的逻辑
    add () {
      console.log(this.files)
      if (this.files.length === 0) {
        this.$toast('请选择封面')
        return false
      } else if (this.title === '') {
        this.$toast('请填写标题')
      } else if (this.text === '') {
        this.$toast('请填写正文')
      } else {
        this.$toast('正在发布', 'loading', 30000)
        let formData = new FormData()
        formData.append('file', this.files[0].file)
        let userid = localStorage.getItem('userId')
        formData.append('userId', userid)
        formData.append('content', this.content)
        formData.append('showGuangChang', 0)
        formData.append('add', 'true')
        formData.append('type', 'article')
        // labels 保存的内容是 `标题;导语`
        let labels = this.title + ';' + this.introduction
        formData.append('labels', labels)
        let url = '/uploadFile'
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$post(url, formData, config).then((res) => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct', 500)
            setTimeout(() => {
              this.toNewPage('/find')
            }, 500)
          } else {
            this.$toast(res.msg, 'warn', 1000)
          }
        })
      }
    },
    // 图片验证逻辑
    addedHandler (files) {
      let formart = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
      const maxSize = 2 * 1024 * 1024 // 2M
      let hasIgnore = false
      for (let k in files) {
        const file = files[k]
        if (typeof file === 'object') {
          if (!formart.includes(file.type)) {
            file.ignore = true
            this.$toast('上传的不是图片文件(jpg,jpeg,png,gif)', 'warn', 1000)
            return false
          } else if (file.size > maxSize) {
            this.$toast('单张图片不能超过2M', 'warn', 1000)
            file.ignore = true
            hasIgnore = true
          }
        }
      }
      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        txt: 'You selected >1M files'
      }).show()
    },
    errHandler (file) {
      // const msg = file.response.message
      this.$toast('上传失败', 'warn', 1000)
    }
  }
}
</script>

<style  lang="stylus">
@import "../../../node_modules/stylus-px2rem"
#addArticle
{
  .fengmian-img
  {
    width 100%
    height 50px
    background-color #eee
    .cube-upload,.cube-upload-btn,.upload-file
    {
      width 100%
      height: 50px
      position relative
      .btn
      {
        position absolute
        top: 50%
        left: 50%
        transform translate(-50%,-50%)
        color:#999
        span
        {
          font-size:20px
        }
      }
    }
    .cube-upload-file .upload-file .cube-upload-file_success .cube-upload-file-def
    {
      background-color red
    }
  }
  .artic-title
  {
    width: 100%
    height  20px
  }
  .cube-upload-file-def
  {
    width: 100%
    height: 50px
  }
}
</style>
